<template>
	<view class="container">
		<!-- 年级选择器 -->
		<picker mode="selector" :range="grades" @change="onGradeChange">
			<view class="grade-selector">
				<view class="selected-grade">{{ selectedGrade || '选择班级' }}</view>
			</view>
		</picker>


		<!-- 提交按钮 -->
		<button @click="submit">提交</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				selectedGrade: '',
				selectedSubject: '',
				grades: ['二年级', '三年级', '四年级', '五年级', '六年级','七年级', '八年级', '九年级']
			};
		},
		methods: {
			onGradeChange(event) {
				const selectedIndex = event.detail.value;
				this.selectedGrade = this.grades[selectedIndex];
			},
			selectSubject(subject) {
				this.selectedSubject = subject;
			},
			submit() {
				// 这里可以添加提交数据的逻辑  
				 this.$emit('fatherMethod',this.selectedGrade);
			}
		}
	};
</script>

<style>
	.container {
		padding: 20px;
	}

	.grade-selector {
		padding: 10px;
		background-color: #f0f0f0;
		margin-bottom: 20px;
	}

	.selected-grade {
		font-size: 18px;
		color: #333;
	}

	.subject-buttons {
		display: flex;
		justify-content: space-between;
		margin-bottom: 20px;
	}

	.subject-button {
		padding: 10px 20px;
		background-color: #ddd;
		border-radius: 5px;
	}

	.subject-button.active {
		background-color: #007aff;
		color: #fff;
	}
</style>